<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0">
  <title>Using @host styling</title>
  <script src="../../polymer.js"></script>
</head>
<body>
  <h4>Expected: red background</h4>
  <x-foo></x-foo>
  
  <h4>Expected: red background with blue text</h4>
  <x-bar></x-bar>
  
  <h4>Expected: red background with blue text and orange border</h4>
  <x-zot></x-zot>
  
  <h4>Expected: red background with blue text and orange border and 20px padding</h4>
  <x-zim></x-zim>
  
  <element name="x-foo">
    <template>
      <style>
        @host {
          * {
            display: block;
            background: red;
          }
        }
      </style>
      <div>red background</div>
    </template>
    <script>Polymer.register(this)</script>
  </element>
  
  <element name="x-bar" extends="x-foo">
    <template>
      <style>
        @host {
          x-bar {
            color: white;
          }
        }
      </style>
      <shadow></shadow>
      <div>white text</div>
    </template>
    <script>Polymer.register(this)</script>
  </element>
  
  <element name="x-zot" extends="x-bar">
    <template>
      <style>
        @host {
          * {
            border: 5px solid orange;
          }
        }
      </style>
      <shadow></shadow>
      <div>orange border & gray background</div>
    </template>
    <script>Polymer.register(this)</script>
  </element>
  
  <link rel="import" href="zim.html">
</body>
</html>
